<template>
    <div>
        <div class="layout-content-breadcrumb">
            <Breadcrumb>
                <Breadcrumb-item>资讯管理</Breadcrumb-item>
                <Breadcrumb-item>内容列表</Breadcrumb-item>
            </Breadcrumb>
        </div>
        <div class="page-content">
            <div class="list-search" @keyup.enter="onSearch">
                <Row type="flex" :gutter="16">
                    <Col span="8">
                    <hx-input-item label="标题">
                        <Input type="text" v-model="search.title" placeholder="请输入标题">
                        </Input>
                    </hx-input-item>
                    </Col>
                    <Col span="8">
                    <hx-input-item label="分类">
                        <Select v-model="search.type" placeholder="请选择分类">
                            <Option v-for="item in types" :value="item.id" :key="item.id">{{item.name}}</Option>
                        </Select>
                    </hx-input-item>
                    </Col>
                    <Col span="8">
                    <Button type="primary" @click="onSearch">查询</Button>
                    </Col>
                </Row>
            </div>
            <Button type="primary" @click="onAdd">新增资讯</Button>
            <Table :columns="columns" :data="dataSource"></Table>
            <div class="table-paging">
                <Page :total="totalNumber" :current="page" :page-size="pageSize" show-total @on-change="onPageChange"></Page>
            </div>
        </div>
        <Modal
                v-model="updateModal.showModal"
                title="修改内容"
                @on-ok="onSureUpdate">
            <Form :model="updateModal" :label-width="60">
                <Form-item label="分类*">
                    <Select v-model="updateModal.model.category_id" placeholder="请选择分类">
                        <Option v-for="item in types2" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                </Form-item>
                <Form-item label="标题*">
                    <Input v-model="updateModal.model.title" placeholder="请输入标题" size="large">
                    </Input>
                </Form-item>
                <Form-item label="内容*">
                    <Input type="textarea" :rows="5" v-model="updateModal.model.content" placeholder="请输入内容"
                           size="large">
                    </Input>
                </Form-item>
                <Form-item label="关键词">
                    <Input v-model="updateModal.model.match_keyword" placeholder="请输入关键词以逗号(，)分隔" size="large">
                    </Input>
                </Form-item>
            </Form>
            </Input>
        </Modal>
        <Modal
                v-model="addModal.showModal"
                title="新增"
                @on-ok="onSureAdd">
            <Form :model="addModal" :label-width="60">
                <Form-item label="分类*">
                    <Select v-model="addModal.model.category_id" placeholder="请选择分类">
                        <Option v-for="item in types2" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                </Form-item>
                <Form-item label="标题*">
                    <Input v-model="addModal.model.title" placeholder="请输入标题" size="large">
                    </Input>
                </Form-item>
                <Form-item label="内容*">
                    <Input type="textarea" :rows="5" v-model="addModal.model.content" placeholder="请输入内容"
                           size="large">
                    </Input>
                </Form-item>
                <Form-item label="关键词">
                    <Input v-model="addModal.model.match_keyword" placeholder="请输入关键词以逗号(，)分隔" size="large">
                    </Input>
                </Form-item>
            </Form>
            </Input>
        </Modal>
    </div>
</template>
<style lang="less">

</style>
<script>
    import api from 'service/information'
    export default{
        data(){
            return {
                page: 1,
                pageSize:10,
                totalNumber: 0,
                search: {
                    title: '',
                    type: '-1'
                },
                types: [],
                addModal: {
                    showModal: false,
                    model: {
                        category_id: '',
                        title: '',
                        content: '',
                        match_keyword: ''
                    }
                },
                updateModal: {
                    showModal: false,
                    model: {
                        id: '',
                        category_id: '',
                        title: '',
                        content: '',
                        match_keyword: ''
                    }
                },
                columns: [
                    {
                        title: '标题',
                        key: 'title'
                    },
                    /*{
                        title: '内容',
                        key: 'content',
                        render: (h, params) => {
                            let txt = params.row.content
                            if (txt.length > 15) {
                                txt = txt.slice(0, 15) + '...'
                            }
                            return h('span', {
                                attrs: {
                                    title: params.row.content
                                }
                            }, txt)
                        }
                    },*/
                    {
                        title: '分类',
                        key: 'category',
                        render: (h, params) => {
                            return params.row.category.title
                        }
                    },
                    {
                        title: '关键词',
                        key: 'match_keyword'
                    },
                    {
                        title: '时间',
                        key: 'created_at'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.$router.push(`/contentlist/detail/${params.row.id}`)
                                        }
                                    }
                                }, '详情'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.onUpdate(params.row)
                                        }
                                    }
                                }, '修改'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.onDel(params.row)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                dataSource: []
            }
        },
        computed: {
            types2(){
                return this.types.slice(1)
            }
        },
        mounted(){
            this.onPageChange(1)
            this.getTypes()
        },
        methods: {
            onSearch(){
                this.onPageChange(1)
            },
            onPageChange(page){
                this.page = page
                api.getContentList({
                    page: page,
                    per_page: this.pageSize,
                    kind:'1',
                    title: this.search.title.trim(),
                    category_id: this.search.type === '-1' ? undefined : this.search.type
                }).then(({data}) => {
                    this.dataSource = (data.list || [])
                    this.totalNumber = Number(data.total_count)
                })
            },
            onAdd(){
                /*Object.keys(this.addModal.model).forEach(key=>{
                    this.addModal.model[key]=''
                })
                this.addModal.showModal=true*/
                this.$router.push('/contentlist/add')
            },
            onSureAdd(){
                let category_id = this.addModal.model.category_id
                let title = this.addModal.model.title.trim()
                let content = this.addModal.model.content.trim()
                if (!title || !content || !category_id) {
                    return this.$Message.warning('*号的为必填项！')
                }
                api.addContent(Object.assign({},this.addModal.model,{kind:'1'})).then(() => {
                    this.addModal.showModal = false
                    this.$Message.success('添加成功！')
                    this.onPageChange(1)
                })
            },
            onUpdate(row){
                /*this.updateModal.showModal = true
                this.updateModal.model.id = row.id
                this.updateModal.model.category_id = row.category_id
                this.updateModal.model.title = row.title
                this.updateModal.model.content = row.content
                this.updateModal.model.match_keyword = row.match_keyword*/
                this.$router.push(`/contentlist/edit/${row.id}`)
            },
            onSureUpdate(){
                let category_id = this.updateModal.model.category_id
                let title = this.updateModal.model.title.trim()
                let content = this.updateModal.model.content.trim()
                if (!title || !content || !category_id) {
                    return this.$Message.warning('*号的为必填项！')
                }
                api.updateContent(this.updateModal.model).then(() => {
                    this.updateModal.showModal = false
                    this.$Message.success('更新成功！')
                    this.onPageChange(this.page)
                })
            },
            onDel(row){
                let that = this
                this.$Modal.confirm({
                    title: '删除',
                    content: `确定删除吗？`,
                    onOk(){
                        api.updateContent({id: row.id, deleted: 1})
                            .then(() => {
                                that.$Message.success('删除成功！')
                                that.onPageChange(that.page)
                            })
                    }
                })
            },
            getTypes(){
                api.getCategoryList()
                    .then(({data}) => {
                        let types = (data.list || []).map(item => {
                            return {
                                id: item.id,
                                name: item.title
                            }
                        })
                        types.unshift({id: '-1', name: '全部'})
                        this.types = types
                    })
            }
        }
    }
</script>
